<template>
  <div id="visualData1">
    <div class="gradient-divider">
      土壤样品氮含量理化分析数据
    </div>
    <div id="echartSoil"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "visualData1",
  data() {
    return {
      categories: Array.from({ length: 16 }, (_, i) => i + 1), // 样区 1-16
      dataN: {
        '6.11': [1.75,1.96,1.79,1.86,1.68,1.80,1.53,1.77,1.67,1.78,1.96,1.71,1.63,1.71,1.61,1.75],
        '5.21': [2.06,2.24,2.28,2.54,3.20,2.44,2.50,2.44,2.16,2.35,3.09,2.39,2.87,2.13,2.88,2.28],
        '5.5':  [2.97,3.68,2.91,2.97,3.99,2.16,3.38,3.90,2.74,2.51,2.61,2.82,2.11,1.20,1.77,2.64]
      }
    }
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      const chart = echarts.init(document.getElementById('echartSoil'));
      chart.setOption({
        grid: { top: '20%', bottom: '10%', left: '10%', right: '5%' }, // 增加上方空间
        legend: {
          data: Object.keys(this.dataN),
          textStyle: { color: "#fff", fontSize: '12' },
          top: 25  // legend 移到上方
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: this.categories,
          name: '样区',
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { color: "#fff", fontSize: '13' } }
        },
        yAxis: {
          type: 'value',
          name: '氮 (g/100g)',
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { color: "#fff", fontSize: '13' } },
          splitLine: { show: false }
        },
        series: Object.keys(this.dataN).map(date => ({
          name: date,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: this.dataN[date]
        }))
      });
    }
  }
}
</script>

<style scoped lang="scss">
#visualData1 {
  padding: 0 .2em;
}

#echartSoil {
  height: 220px; /* 保持原高度 */
  width: 100%;
}

.gradient-divider {
  display: flex;
  align-items: center;
  height: 28px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  color: #f3f1f1;
  background: linear-gradient(to right, rgb(24, 115, 164) 0%, transparent);
  padding: 0 10px;
}
</style>
